<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/bootstrap3/css/dashboard.css">
    <link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap-theme.css">
    <link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap.min.css">
    <script src="../../lib/jquery/jquery-1.10.2.js"></script>
    <script src="../../lib/bootstrap3/js/bootstrap.min.js"></script>
    <script src="../../lib/angularjs/angular.min.js"></script>
</head>
<body ng-app="formApp">
<div class="container theme-showcase" role="main">
    <form name="signup_form" class="form-horizontal" role="form"
          novalidate
          ng-submit="signupForm()"
          ng-controller="signupController">
        <div class="form-group">
            <label  class="col-sm-3 control-label">名字</label>
            <div class="col-sm-5">
                <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required   class="form-control" />
                <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
                    <div class="alert alert-danger" role="alert" ng-show="signup_form.name.$error.required">
                        <a href="#" class="alert-link">Your name is required.</a>
                    </div>
                    <div class="alert alert-info" role="alert" ng-show="signup_form.name.$error.minlength">
                        <a href="#" class="alert-link">Your name is required to be at least 3 characters</a>
                    </div>
                    <div class="alert alert-warning" role="alert" ng-show="signup_form.name.$error.maxlength">
                        <a href="#" class="alert-link">Your name cannot be longer than 20 characters</a>
                    </div>
                </div>
                <div class="alert alert-success" role="alert" ng-show="signup_form.name.$dirty && signup_form.name.$valid">
                    <a href="#" class="alert-link">验证通过</a>
                </div>
            </div>
        </div>
        <div class="form-group {{ signup_form.username.$pristine?'':signup_form.username.$error.minlength ? 'has-error':'has-success'}} has-feedback">
            <label class="control-label col-sm-3">
                用户名
            </label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="username" ng-model="username" ng-minlength="3" placeholder="最小长度为3">
                <span class="glyphicon {{ signup_form.username.$pristine?'':signup_form.username.$error.minlength ? 'glyphicon-remove':'glyphicon-ok'}} form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3">
                编号
            </label>
            <div class="col-sm-5">
                <input type="text" name="code" ng-model="code" ensure-unique="code" class="form-control" placeholder="这是唯一验证">
                <small class="error"
                       ng-show="signup_form.code.$error.unique">
                    That code is taken, please try another
                </small>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-5">
                <button type="submit" class="btn btn-danger" ng-disabled="signup_form.$invalid">Sign in</button>
            </div>
        </div>
    </form>
</div>
<script>
    (function () {
        var formApp=angular.module("formApp",[]);
        formApp.directive("ensureUnique",ensureUnique);
        function ensureUnique($http) {
            return {
                require: 'ngModel',
                link: function(scope, ele, attrs, c) {
                    scope.$watch(attrs.ngModel, function(n) {
                        if (!n) return;
                        $http({
                            method: 'POST',
                            url: '7.3.json?' + attrs.ensureUnique,
                            data: {
                                field: attrs.ensureUnique,
                                value: scope.ngModel
                            }
                        }).success(function(data) {
                            c.$setValidity('unique', data.indexOf(n)==-1);
                        }).error(function(data) {
                            c.$setValidity('unique', false);
                        });
                    });
                }
            };
        }

        formApp.controller('signupController', function($scope) {
            $scope.submitted = false;
            $scope.signupForm = function() {
                if ($scope.signup_form.$valid) {
                    // 正常提交
                } else {
                    alert("非法提交！");
                    $scope.signup_form.submitted = true;
                }
            }
        });
    }());
</script>
</body>
</html>